<!--
  项目实例的页面入口
  项目实例的全局组件（如全局提示等） + 全局样式
  以及可选的全局生命周期钩子
  当不挂在router前端路由时，即为真·单页面应用
 -->

<!-- 视图层 -->
<template>

<!-- 公告栏 -->
<t-notice-bar
  content="用法说明：输入自己的学号和期中成绩，即可查询期末成绩。"
  theme="info"
  :visible="true"
  :prefix-icon="true"
/>

<!-- 学号 -->
<t-input
  v-model="idRef"
  type="text"
  label="学号"
  placeholder="请输入学号"
/>

<!-- 期中成绩 -->
<t-input
  v-model="midScoreRef"
  type="number"
  label="期中成绩"
  placeholder="请输入期中成绩"
/>

<!-- “查询成绩”按钮 -->
<t-button
  :onClick="(event) => check(event)"
  content="查询期末成绩"
  :block="true"
  size="large"
  theme="light"
/>

<!-- 消息弹窗 -->
<t-dialog
  :onConfirm="(event) => confirmDialog(event)"
  :visible="isShowDialogRef"
  title="查询结果"
  confirm-btn="确定"
>
  <!-- 消息内容 -->
  {{ dialogContentRef }}
</t-dialog>

<!-- 页脚 -->
<t-footer
  text="ICP备案号：京ICP备2020036654号-9"
/>

</template>

<!-- 逻辑层 -->
<script setup>
// // 引入VUE路由的视图容器
// import { RouterView } from 'vue-router'
// 引入VUE的ref组件
import { shallowRef } from "vue"
// 引入加密解密模块
import {
  // AES加密
  aesEncrypt,
  // AES解密
  aesDecrypt,
  // 导入AES密钥
  importAesKey,
  // ArrayBuffer转Array数组
  bufferToArray
} from "./scripts/crypt.js"
// 引入学号表
import { checkArr } from "./resource/checkArr.js"
// 引入期中成绩表
import { codenArr } from "./resource/codenArr.js"
// 引入期末成绩表
import { cipherAoa } from "./resource/cipherAoa.js"

/**
 * @ref对象
 */
// 对话框是否显示
const isShowDialogRef = shallowRef(false)
// 对话框内容
const dialogContentRef = shallowRef("")
// 学号
const idRef = shallowRef(null)
// 期中成绩
const midScoreRef = shallowRef(null)


/**
 * check
 * @function 查询成绩
 * @param { Event } event 点击事件
 */
async function check(event) { try {
  // console.log("点击了查询按钮: ", event)
  // console.log("学号: ", idRef.value)
  // console.log("期中成绩: ", midScoreRef.value)

  // 判断学号和期中成绩是否为空
  if (
    idRef.value === null || idRef.value.length === 0
    || midScoreRef.value === null || midScoreRef.value.length === 0
  ) {
    // 任何一个为空，则弹出提示框
    dialogContentRef.value = "学号或期中成绩不能为空！"
    isShowDialogRef.value = true
    // 直接退出
    return
  }

  // 用学号生成AES密钥key
  const key = await importAesKey(idRef.value.toString())
  // 用AES密钥加密学号
  const aesXueHao = await aesEncrypt(idRef.value.toString(), key)
  // 学号密文转为Array
  const aesXueHaoArr = bufferToArray(aesXueHao)
  // 学号密文转为字符串
  const aesXueHaoStr = JSON.stringify(aesXueHaoArr)
  // 查找学号索引
  const xueHaoIndex = checkArr.indexOf(aesXueHaoStr)

  // 如果学号不存在
  if (xueHaoIndex === -1) {
    // 弹出提示框
    dialogContentRef.value = "学号或期中成绩填写错误！"
    isShowDialogRef.value = true
    // 直接退出
    return
  }

  // 学号存在，则处理期中成绩：用AES密钥加密期中成绩
  const aesQiZhong = await aesEncrypt(midScoreRef.value.toString(), key)
  // 期中成绩密文转为Array
  const aesQiZhongArr = bufferToArray(aesQiZhong)
  // 期中成绩密文转为字符串
  const aesQiZhongStr = JSON.stringify(aesQiZhongArr)

  // 比较期中成绩，如果不一致
  if (aesQiZhongStr !== codenArr[xueHaoIndex]) {
    // 弹出提示框
    dialogContentRef.value = "学号或期中成绩填写错误！"
    isShowDialogRef.value = true
    // 直接退出
    return
  }

  // 期中成绩一致，则查询期末成绩
  const aesQiMoBuffer = new Uint8Array(cipherAoa[xueHaoIndex])
  // 用AES密钥解密期末成绩
  const aesQiMo = await aesDecrypt(aesQiMoBuffer, key)
  // 弹出提示框
  dialogContentRef.value = `您的期末成绩为：${ aesQiMo }`
  isShowDialogRef.value = true
} catch (error) {
  console.log("查询成绩出错: ", error)
  // 弹窗
  dialogContentRef.value = error
  isShowDialogRef.value = true
}}

/**
 * confirmDialog
 * @function 对话框确认
 * @param { Event } event 触发事件
 */
function confirmDialog(event) { try {
  // 不现实弹窗即可
  isShowDialogRef.value = false
} catch (error) {
  console.log("对话框确认报错: ", error)
}}

</script>

<!-- 样式层 -->
<style>
/* 网页体 */
body {
  /* 控制外边距以居中 */
  margin: 0 auto;
  /* 控制内边距 */
  padding: 0 0.5em;
}
/* 媒体查询：屏幕尺寸宽度超过768px */
@media screen and (min-width: 768px) {
  /* 网页体 */
  body {
    /* 限制最大宽度为768px */
    max-width: 768px;
  }
}
</style>
